<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alicat测试文件上传下载</title>
    <link rel="icon" type="image/x-icon" href="../static/favicon2.png" sizes="16x16 32x32 96x96">
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js"></script>
    <style>
        .center-flex {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 250px;
        }
        .centered-form {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 50px;

        }
    </style>

    <script>
        {#$(document).ready(function() {
            $('#upFile').submit(function(e) {
                e.preventDefault();
                $.ajax({
                    url: '/delete/'+ {{ file }},
                    type: 'POST',

                    success: function() {
                        alert("删除成功");
                        $('#upFile').remove();

                    },
                    error: function() {
                        alert('删除失败');
                    }
                });
            });
        });#}

    </script>

</head>
<body>
<!--    <form action="http://localhost:5000/upload_video" method="post" enctype="multipart/form-data">-->
<!--    <input type="file" name="video" />-->
<!--    <input type="submit" value="Upload" />-->
<!--    </form>-->
    <div class="center-flex">
        <img src="../static/alicat.jpg" width="20%" height="20%" alt="Centered Image">
    </div>

    <div class="centered-form">
        <h2>文件上传</h2>&nbsp;&nbsp;&nbsp;
        <!-- 上传表单 -->
        <form action="/upload" method="post" enctype="multipart/form-data">
            <input type="file" name="file" id="fileInput"><br><br>
            <button type="submit">确认上传</button>
        </form>

        <h2>文件下载</h2>

        <!-- 下载文件列表 -->
        <ul>
            {% for file in files %}
                <li id="liFile">
                    <form  id= upFile action="/delete/{{ file }}"  method="post" enctype="multipart/form-data">
{#                        {{ csrf_token }}#}
                        <a href="{{ url_for('download_file', filename=file) }}" id="deleteId" download="{{ file }}">{{ file }}</a>
{#                        <a href="{{ url_for('download_file', filename=file) }}" id="upFile" download="{{ file }}">{{ file }}</a>#}
                        <input type="submit" id="deleteFile" value="删除文件" name="file">
{#                        <input type="file" id="myFile" name="file" />#}
{#                        <button type="button" id="deleteFile">删除文件</button>#}
                    </form>
                </li>
            {% endfor %}
        </ul>
    </div>


</body>
</html>

